<template>
    <div class="dock">
        <div>
            <el-button @click="handleProductLayout">柜体线列排布</el-button>
            <!-- <el-button @click="handleClickDoor">门板审核</el-button> -->
            <el-button @click="handleDoorOpen">开门/关门</el-button>
            <!-- <el-button>铰链</el-button>
            <el-button>门缝</el-button>
            <el-button>拉直器</el-button>
            <el-button>厚度</el-button> -->
        </div>
        <!-- <div>
            <el-button>抽轨审核</el-button>
            <el-button>层板审核</el-button>

        </div> -->
    </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, watch, unref } from 'vue';
import { scene, camera, canvas, changeMode } from '@/core3d';
import { DoorAuditMode } from '@/core3d/modes/DoorAuditMode';
import { useCurrentModelStore } from '@/stores/current';
import { MoveProductsOnLine } from '@/core3d/drawing';
import { TraverseAndFilter } from '@/core3d/helpers/GroupTraverseHelper';
import { AnimateDoorOpen, AnimateDoorClose } from '@/core3d/animation/doorAnimate';

let isDoorOpen = false;

const handleClickDoor = () => {
    changeMode(new DoorAuditMode(canvas, camera, scene), false);
}

const handleDoorOpen = () => {
    let doors = TraverseAndFilter(
        scene.children,
        (cm) => {
            return cm.prodCatId == 498 || cm.prodCatId == 1043;
        },
        (cm) => false,
        (cg) => cg.model.doorClosed = isDoorOpen,
        (cg, cm) => {
            cg.model.doorClosed = isDoorOpen;
        }
    );
    doors.forEach((d) => isDoorOpen ? AnimateDoorClose(d) : AnimateDoorOpen(d));
    isDoorOpen = !isDoorOpen;
}

const handleProductLayout = () => {
    MoveProductsOnLine(scene);
}

export default defineComponent({
    setup(props, { emit, attrs }) {
        return { handleClickDoor, handleDoorOpen, handleProductLayout }
    }
});
</script>

<style>
.dock {
    position: fixed;
}
</style>